<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="Keywords" content=""/>
    <meta name="Description" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes,minimal-ui"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>简单模仿Photoshop拾色器</title>
    <style>
        h2 {
            text-align: center;
        }

        .palette {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 600px;
            height: 362px;
            padding: 12px;
            margin: auto;
            border: 1px solid #CCC;
            background-color: #DCDCDC;
        }

        .palette > div {
            position: relative;
            height: 100%;
            border: 1px solid #CCC;
        }

        .palette > div:nth-of-type(1) {
            width: 60%;
            margin-right: 2%;
            overflow: hidden;
            float: left;
        }

        .palette > div:nth-of-type(2) {
            width: 5%;
            float: left;
        }

        .palette > div:last-child {
            border-width: 0;
            width: 30%;
            height: 100%;
            text-align: right;
            float: right;
        }

        .palette > div > input {
            width: 70%;
            margin: 0 0 1em .2em;
            padding: .3em;
        }

        .palette > div > input[type="button"]:nth-of-type(2) {
            margin-bottom: 5em;
        }

        .palette > div > i {
            position: absolute;;
            pointer-events: none;
        }

        .palette > div:first-child > i {
            left: 100%;
            top: 0;
            width: 9px;
            height: 9px;
            border: 1px solid #000;
            border-radius: 50%;
            margin: -5px 0 0 -5px;
            box-shadow: 0 0 1px 1px #FFF
        }

        .palette > div:nth-of-type(2) > i {
            left: 0;
            top: 0;
            width: 100%;
            height: 10px;
            margin-top: -5px;
        }

        .palette > div:nth-of-type(2) > i:before,
        .palette > div:nth-of-type(2) > i:after {
            position: absolute;
            content: "";
            width: 0;
            height: 0;
            border: 5px solid transparent;
        }

        .palette > div:nth-of-type(2) > i:before {
            left: -5px;
            top: 0;
            border-left-color: #000;
        }

        .palette > div:nth-of-type(2) > i:after {
            right: -5px;
            top: 0;
            border-right-color: #000;
        }
    </style>
</head>
<body>
<h2>简单模仿Photoshop拾色器</h2>

<div class="palette">
    <div></div>
    <div></div>
    <div>
        <input type="button" value="确定"/><br/>
        <input type="button" value="取消"/><br/>
        rgb<input type="text" readonly="readonly"/><br/>
        #<input type="text" readonly="readonly"/><br/>
    </div>
</div>
<script>
    //<![CDATA[
    !function () {
        var stage = document.querySelector(".palette"),
                divs = stage.children,
                cvs = document.createElement("canvas"),
                cvs1 = cvs.cloneNode(false),
                i = document.createElement("i"),
                i1 = i.cloneNode(false),
                ctx1 = cvs1.getContext("2d"),
                ch = divs[1].clientHeight,
                cw = divs[1].clientWidth;

        cvs.width = divs[0].clientWidth;
        cvs.height = divs[0].clientHeight;
        cvs1.height = ch;
        cvs1.width = cw;
        divs[0].appendChild(cvs);
        divs[0].appendChild(i);
        divs[1].appendChild(cvs1);
        divs[1].appendChild(i1);

        while (--ch >= -1) {
            ctx1.beginPath();
            ctx1.strokeStyle = "hsl(" + ch + ",100%,50%)";
            ctx1.moveTo(0, ch);
            ctx1.lineTo(cw, ch);
            ctx1.stroke();
            ctx1.closePath();
        }


        function setPalette(data) {
            var w = cvs.width, h = cvs.height, r = data[0], g = data[1], b = data[2], a = data[3], o, i = 0, j, ctx = cvs.getContext("2d"), imgData = ctx.getImageData(0, 0, w, h), data2 = imgData.data, w2 = w * 4;

            for (; i < h; i++) {
                for (j = 0; j < w2; j += 4) {
                    o = 255 * (h - i) / h;
                    data2[i * w2 + j] = o - (o - r * (h - i) / h) * j / w2 | 0;
                    data2[i * w2 + j + 1] = o - (o - g * (h - i) / h) * j / w2 | 0;
                    data2[i * w2 + j + 2] = o - (o - b * (h - i) / h) * j / w2 | 0;
                    data2[i * w2 + j + 3] = 255;
                }
            }
            ctx.putImageData(imgData, 0, 0);
            setColor(data);
        }

        function setColor(data) {
            var inps = stage.querySelectorAll("input[type='text']");
            inps[0].value = data[0] + "," + data[1] + "," + data[2];
            inps[1].value = hex(data[0]) + hex(data[1]) + hex(data[2]);
        }

        function hex(n) {
            return n > 16 ? n.toString(16).toUpperCase() : "0" + n.toString(16).toUpperCase();
        }

        cvs.addEventListener("click", function (e) {
            var x = e.offsetX, y = e.offsetY;
            e.preventDefault;
            e.stopPropagation();
            setColor(this.getContext("2d").getImageData(x, y, 1, 1).data);
            i.style.left = x + "px";
            i.style.top = y + "px";
        }, false);
        cvs1.addEventListener("click", function (e) {
            var x = e.offsetX, y = e.offsetY, data = this.getContext("2d").getImageData(x, y, 1, 1).data;
            e.preventDefault;
            e.stopPropagation();
            setPalette(data);
            i1.style.top = y + "px";
            i.style.left = i.style.top = "auto";
        }, false);
        setPalette(ctx1.getImageData(0, 0, 1, 1).data);
    }();
    //]]>
</script>
</body>
</html>